<script setup lang="ts">
defineProps<{
  consumed: number
  invitedUser: string
  inviteTime: string
  arrivalTime?: string
}>()
</script>

<template>
  <view class="mb-24rpx rounded-20rpx bg-white p-24rpx">
    <view class="flex items-center justify-between">
      <view class="text-32rpx text-#333333 font-semibold leading-45rpx">
        邀请用户{{ invitedUser }}
      </view>
      <view class="flex-shrink-0 text-28rpx leading-40rpx" :class="[consumed ? 'text-#3E86FF' : 'text-#FF7419']">
        {{ consumed ? '已进店消费' : '未进店消费' }}
      </view>
    </view>
    <Spacer height="24" />
    <Divider width="654" color="#E6E6E6" />
    <Spacer height="24" />
    <view class="flex text-28rpx leading-40rpx">
      <view class="text-#333333 font-medium">
        邀请时间：
      </view>
      <view class="text-#848484">
        {{ inviteTime }}
      </view>
    </view>
    <block v-if="consumed">
      <Spacer height="24" />
      <view class="flex text-28rpx leading-40rpx">
        <view class="text-#333333 font-medium">
          进店时间：
        </view>
        <view class="text-#848484">
          {{ arrivalTime }}
        </view>
      </view>
    </block>
  </view>
</template>
